<template>
  <div :class="{'theme-market': showMarketingBar}">
    <div :style="'background: url(' + datumInfo.datumCover + ') 0% 0% / 100% 100% no-repeat;'" class="c-w100 c-p c-maxw640" v-if="!inputFocus">
      <div class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-balck3 c-pz7">
        <div class="c-w100 c-h backdropFilter2"></div>
      </div>
      <div class="c-hh427 c-p c-text-hidden c-w100 c-flex-row c-flex-center c-pz8">
        <img
          :src="
            $addXossFilter(
              datumInfo.datumCover,
              require('@/assets/i/wap/datum/datumsDefault.png')
            )
          "
          class="c-maxh c-maxw"
          alt=""
        />
      </div>
    </div>
    <flash-sales-time-new
      v-if="showMarketingBar"
      :type="datumInfo.flashSales ? 'isSale' : datumInfo.isFriendHelper ? 'isFa' : datumInfo.bargain ? 'isBargain':''"
      :originalPrice="datumInfo.price"
      :isLimit="(datumInfo.bargain && datumInfo.bargain.isLimitStock == 2) ? false : true"
      :stockBargain="datumInfo.bargain && datumInfo.bargain.stock"
      :bargainStatus="datumInfo.bargain && datumInfo.bargain.status"
      :isPreheat="datumInfo.bargain && datumInfo.bargain.isPreheat"
      :price="datumInfo.flashSales ? datumInfo.flashSales.price : datumInfo.bargain ? datumInfo.bargain.reservePrice : ''"
      :startTime="
        datumInfo.flashSales
          ? datumInfo.flashSales.sales.startTime
          : datumInfo.bargain ? datumInfo.bargain.startTime : datumInfo.faStartAt
      "
      :endTime="
        datumInfo.flashSales
          ? datumInfo.flashSales.sales.endTime
          : datumInfo.bargain ? datumInfo.bargain.endTime : datumInfo.faEndAt
      "
      :optimal="optimal"
      @falshSalesTime="falshSalesTime"
      @finishFlashSales="finishFlashSales"
    ></flash-sales-time-new>
    <div class="c-bd-b12-f5">
      <div class="c-ph24 c-pt30 c-mb10">
        <div class="c-fs30 c-fw-b c-fc-xblack">
          {{ datumInfo.name }}
        </div>
      </div>
      <price-bar
        class="c-pt10 c-pl24"
        v-if="
          !curHasPermission &&
            ckFrom != 78 &&
            !datumInfo.isFriendHelper &&
            !datumInfo.flashSales &&
            !datumInfo.bargain &&
            !(datumInfo.isSaleOnly == 0)
        "
        :dataInfo="datumInfo"
      >
      </price-bar>
      <div class="c-flex-row c-justify-sb c-aligni-center c-ph24 c-pb24">
        <div class="c-flex-grow1 c-fs20 c-fc-gray c-flex-row c-aligni-center c-flexw-wrap">
          <div class="c-flex-row c-aligni-center c-flex-shrink0 c-mr30 c-mt10">
            <i class="iconfont c-fs20 c-mr4">&#xe69c;</i>
            <span>文件数量：{{ datumInfo.datumRelatesNum }}</span>
            <i class="c-ml30 iconfont c-fs20 c-mr4">&#xe64f;</i>
            <span class="c-flex-shrink0">下载量：{{ datumInfo.downloadTimes }}</span>
          </div>
          <valid-time-com v-if="datumInfo && datumInfo.effectiveProd" :isShowIcon="true" class="c-mt10" :prodId="dId" :dataInfo="datumInfo" :prodType="cfrom.datum"></valid-time-com>
        </div>
        <collect-btn-com class="c-flex-shrink0 c-ml20" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.datum" :prodId="dId" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
      </div>
      <!-- 非强制表单入口 -->
      <formEntry v-if="datumInfo.isBuy && ((datumInfo.collectPage == 3 &&
                   datumInfo.isRelForm == true &&
                   datumInfo.hasFormLog == false &&
                   isShowFormlg) ||
                   (datumInfo.hasFormLog &&
                     datumInfo.enableEdit == 2 &&
                     isShowFormlg &&
                     datumInfo.isRelForm == true))"
        relType="13"  :relId="datumInfo.datumId" :dataInfo="datumInfo"
        classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-t12-f5"
        @goForm="goForm" ></formEntry>
      <!-- 积分及会员，大转盘，vip入口优惠提示 -->
      <discount-tip
        :isNew="true"
        :dataInfo="datumInfo"
        :sales="datumInfo.flashSales"
        :isFriendHelper="datumInfo.isFriendHelper"
        :couponList="couponList"
        @clickShowCoupon="showCoupon = true"
        :isiOS="isiOS"
        :hasPermission="curHasPermission"
        :couponPermission="ckFrom != 78 ? true : false"
        :showDiscount="showDiscount"
        :isMarketing="isMarketing"
        v-if="Number(datumInfo.price) > 0"
      ></discount-tip>
      <bargain-rules
        v-if="datumInfo.bargain != null && !curHasPermission"
        :isPreheat="datumInfo.bargain.isPreheat"
        :status="datumInfo.bargain.status"
        class="c-bd-t12-f5"
      ></bargain-rules>
    </div>
    <collocation-buy-com :prodInfo="{prodType: 8, prodId: dId}" :relateCollocationArr="relateCollocation"></collocation-buy-com>
    <section class="c-minh640">
      <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6 c-ph24" :styleType="2"  :tabList="tabList" :tabIndex="typeIndex" @changeTab="changeType"></my-small-tabbar>
      <div class="c-pt12 c-pl24 c-pr30" v-if="typeIndex == 0">
        <course-description
          ref="descriptions"
          :prodType="cfrom.datum"
          :prodId="dId"
        ></course-description>
      </div>
      <div class="c-pt12 c-pl24 c-pr30" v-if="typeIndex == 1">
        <course-description
          ref="previewDescriptions"
          :imgTextPreviewArr="
            datumInfo && datumInfo.datumPreview ? datumInfo.datumPreview : []
          "
          :isImgTextPreview="true"
          :prodType="cfrom.datum"
          :prodId="dId"
        ></course-description>
      </div>
      <div class="c-pb24" id="searchBarWrap" v-show="typeIndex == 2">
        <new-search-bar :searchText="searchText" @inputFocus="focusInput" @inputBlur="blurInput" @search='startSearch' @clear="startSearch" @cancel='startSearch'></new-search-bar>
        <div
          class="c-pv20 c-bd-b1-f6 c-pl24 c-pr30 "
          v-for="(item, index) in relatesList"
          :key="index"
        >
          <div class="c-flex-row c-justify-sb c-aligni-center c-w100">
            <div>
              <div class="c-ww520 c-fs24 c-text-ellipsis2 c-fw-b">
                {{ item.datumName }}
              </div>
              <div class="c-flex-row c-aligni-center c-fs20 c-fc-gray c-pt16">
                <div class="c-pr16">{{ item.datumSize }}</div>
                <div
                  class="c-bd-l1-ccc c-pl16 c-text-decoration-underline"
                  @click.stop="goOtherDownload(index)"
                  v-if="item.downloadLink"
                >
                  详情
                </div>
              </div>
            </div>
            <div @click="clickDownload(item)">
              <span class="iconfont c-fs32 c-fc-gray">&#xe64f;</span >
              <div class="c-fs16 c-fc-gray">下载</div>
            </div>
          </div>
        </div>
        <loading-status-tem
          :dataStatus="dataStatus"
          :noDataText="'暂无相关资料'"
        ></loading-status-tem>
      </div>
      <package-index-com
        :showAll="true"
        :showPackageModal="true"
        @clickGoAllPackage="clickGoAllPackage"
        :proType="5"
        :proId="dId"
        :isHomePage="false"
        :packageList="packageList"
        v-if="packageList.length > 0 && companyAuth.enableComboModule == 1"
      ></package-index-com>
    </section>
    <comfirm-com
      :showPassword="showPassword"
      :noticeText="noticeText"
      :text="'输入密码'"
      :placeholderText="'请输入密码'"
      @changePsw="changePsw"
      @closePassword="showPassword = false"
      @submitPassword="submitPassword"
    ></comfirm-com>
    <coupon-list-com
      v-if="
        (datumInfo.isBuy == 0 && datumInfo.flashSales) || !datumInfo.flashSales
      "
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :dataInfo="datumInfo"
      :isMarketing="isMarketing"
    >
    </coupon-list-com>
    <!-- 关注二维码 -->
    <offical-account
      v-if="datumInfo && datumInfo.bargain"
      :showAccountQcode="showAccountQcode"
      :desc="officalDesc"
      :imgSrc="$addXossFilter(mpQrcode)"
      @hideDialog="hideDialog"
    ></offical-account>
    <related-combo :showTop="true" @closeCombo="closeCombo" @getMore="getMore" :showCombo="showCombo" :packageMore="is_page_package"
      :packageList="belongPackageList" :columnMore="is_page_column" :columnList="belongColumnList"></related-combo>
    <div v-if="!curHasPermission || (curHasPermission && typeIndex != 2)">
      <bottom-buy-com
        :ckFrom="8"
        :isNeedPay="!curHasPermission && datumInfo.payType == 2"
        :showBuyButton="!(curHasPermission || datumInfo.permission == 21)"
        :showNotSale="
          datumInfo.isSaleOut == 0 && !curHasPermission && datumInfo.permission != 21
        "
        :notSale="datumInfo.isSaleOut == 0 && datumInfo.permission != 21"
        :isOffSale="isOffSale"
        :showFormText="showFormText"
        :showMarketingCard="datumInfo.isFriendHelper || datumInfo.flashSales || datumInfo.bargain"
        :showFriendHelper="datumInfo.isFriendHelper"
        :timingPutOn="timingPutOn"
        :delayTime="datumInfo.delayTime"
        @goFormDetail="goForm"
        @invitePoster="invitePoster"
        @putOn="putOn"
      >
        <div
          v-if="isUserGroup"
          class="c-fc-white c-hh64 c-flex-row c-flex-center c-br30 c-bg-ccc c-fs24 c-w100"
        >
          {{datumInfo.payType == 1 || datumInfo.payType == 3 ? '指定用户可下载' : '指定用户可购买'}}
        </div>
        <div
          v-else-if="curHasPermission"
          @click="goDownloadTab"
          :class="
            datumInfo.downloadLink ? 'c-ml40 c-flex-grow1 c-w0' : 'c-w100'
          "
          class="c-fc-white c-hh64 c-flex-row c-flex-center c-br30 theme-bg c-fs24"
        >
          下载资料
        </div>
        <div
          v-else-if="datumInfo.permission == 21"
          @click="clickEncrypt"
          class="c-fc-white c-w100 c-hh64 c-flex-row c-flex-center c-br30 theme-bg c-fs24"
        >
          输入密码
        </div>
        <template v-else>
          <div v-if="datumInfo.bargain != null && ((datumInfo.bargain.status == 1 && datumInfo.bargain.isPreheat == 1) || datumInfo.bargain.status == 2)" class="c-flex-row c-aligni-center c-w100 c-hh64">
            <div @click="clickBuy" class="c-flex-column c-aligni-center c-justify-sa c-w50 c-br32 c-ml16 c-h" :class="isOffSale ? 'c-fc-white c-bd-d1' : 'theme-bd1 theme-fc'">
              <span class="c-fs20 c-lh">{{getBuyBtnTitle}}</span>
              <span class="c-fs22 c-lh">{{ "￥" | iosPriceFilter }}{{ calculationPrice }}</span>
            </div>
            <!-- 未发起砍价 -->
            <template v-if="datumInfo.bargain.userType == 1">
              <div @click="handleClickBargainDetail(datumInfo.bargain.bargainId)" class="c-flex-column c-flex-center c-fc-white theme-bg-gradient c-w50 c-ml16 c-br32 c-h">
                <span class="c-fs26">正在砍价</span>
              </div>
            </template>
            <template v-if="datumInfo.bargain.userType == -1">
              <div @click="handleClickBargainDetail(datumInfo.bargain.bargainId)" class="c-flex-column c-aligni-center c-justify-sa c-w50 c-br32 c-ml16 c-h c-fc-white" :class="(datumInfo.bargain.status == 1 && datumInfo.bargain.isPreheat == 1) ? 'c-bg-d7' : 'theme-bg-gradient'">
                <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{Number(datumInfo.bargain.reservePrice).toFixed(2)}}</span>
                <span class="c-fs20 c-lh">砍价享</span>
              </div>
            </template>
          </div>
          <div
            v-else-if="datumInfo.isFriendHelper && (faStatus == 1 || faStatus == 2)"
            class="c-flex-row c-aligni-center c-hh64"
          >
            <div
              class="c-flex-column c-aligni-center c-justify-sa c-ww196 c-br32 c-mr10 c-ml16 c-h"
              :class="isOffSale ? 'c-fc-white c-bd-d1' : 'theme-bd1 theme-fc'"
              @click="clickBuy"
            >
              <span class="c-fs22 c-lh">{{ "￥" | iosPriceFilter }}{{ calculationPrice }}</span>
              <span class="c-fs20 c-lh">{{getBuyBtnTitle}}</span>
            </div>
            <div
              class="c-flex-column c-flex-center c-fc-white c-ww196 c-br32 c-h"
              :class="faStatus == 2 && !isOffSale ? 'theme-bg-gradient' : 'c-bg-d7'"
              @click="goHelpDetail()"
            >
              <span class="c-fs26">灌溉领取</span>
            </div>
          </div>
          <div
            v-else-if="datumInfo.isSaleOnly == 0 && datumInfo.isSaleTogether == 1"
            class="c-fc-white c-hh64 c-flex-row c-flex-center c-w100 c-br30 c-fs24" :class="isOffSale ? 'c-bg-d7' : 'theme-bg'"
            @click="backPackage"
          >
            所属套餐
          </div>
          <div
            v-else
            class="c-fc-white c-hh64 c-flex-row c-flex-center c-w100 c-br30 c-fs24" :class="isOffSale ? 'c-bg-d7' : 'theme-bg'"
            @click="clickBuy"
          >
            立即购买
          </div>
        </template>
      </bottom-buy-com>
    </div>

    <div class="masker" v-if="isShowOther" @click="closeMasker"></div>
    <div
      class="c-pf c-p-b0 c-p-l0 c-w100 c-maxw640 c-pz101 c-bg-white c-box-shadow9 c-bd-t1 c-br-tl20 c-br-tr20 c-pt30"
      v-if="isShowOther"
    >
      <div class="c-p c-pb20 c-ph40">
        <div class="c-fs28 c-fc-xblack c-textAlign-c c-fw-b">资料详情</div>
        <div
          class="c-pa c-p-t8 c-p-r40 iconfont c-fs20 c-textAlign-r"
          @click="closeMasker"
        >
          &#xe61b;
        </div>
      </div>
      <div class="hh430 c-text-hidden c-p">
        <div
          v-html="relatesList[relatesIndex].downloadLink"
          class="tinymce-text c-lh36 c-fc-sblack c-ww-bw c-wb-ba c-contexty-scroll c-fs24 c-h c-ph40 c-pb40 c-pt20"
          :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
        ></div>
        <div
          v-if="!curHasPermission"
          class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-balck40"
        >
          <div class="c-w100 c-h backdropFilter"></div>
          <div
            class="c-fc-white c-textAlign-c c-pa c-p-tp50 c-p-tl50 c-translate-xy-50"
          >
            <div class="iconfont c-fs54">&#xe8bc;</div>
            <div class="c-fs28 c-pt30">
              {{
                datumInfo.permission == 18 || datumInfo.permission == 17
                  ? "购买后可看"
                  : "解密后可看"
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <not-support-play ref="notSupportPlay"></not-support-play>
    <!-- 关联售卖相关目录 -->
    <open-modal :openModal="showPackageList" @closeModal="showPackageList = false">
      <package-list-tmp :isTemplate="true" ref="packageList"></package-list-tmp>
    </open-modal>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import couponListCom from "@/components/templates/couponListCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import DiscountTip from "@/components/templates/common/discountTip.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import PriceBar from "@/components/templates/common/priceBar.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
// import VueAPlayer from "@/plugin/vue-aplayer/vue-aplayer.vue";
import courseDescription from "@/components/templates/courseDescription";
import relatedCombo from '@/components/templates/relatedCombo';
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import CollectBtnCom from "@/components/templates/common/collectBtnCom.vue";
import collocationBuyCom from '@/components/templates/collocationBuyCom';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import notSupportPlay from "@/components/templates/common/notSupportPlay.vue";
import formEntry from "@/components/homePage/form/formEntry.vue"
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import PackageListTmp from '@/components/templates/packageListTmp.vue';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
let datumId = "";
let isClicking = false;
let pageIndex = 1;
let firstSearch = false;
const LIMIT = 10;
export default {
  name: "datumDetail",
  components: {
    PackageIndexCom,
    ComfirmCom,
    couponListCom,
    loadingStatusTem,
    DiscountTip,
    BottomBuyCom,
    PriceBar,
    // Aplayer: VueAPlayer,
    FlashSalesTimeNew,
    courseDescription,
    relatedCombo,
    bargainRules,
    officalAccount,
    CollectBtnCom,
    newSearchBar,
    collocationBuyCom,
    validTimeCom,
    notSupportPlay,
    formEntry,
    MySmallTabbar,
    OpenModal,
    PackageListTmp
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      datumInfo: {
        datumSize: "0",
        name: "",
        format: "zip",
        permission: 18,
        price: "0.00",
        downloadTimes: 0,
        qiniuObject: "",
        isBuy: false,
      },
      dId: "",
      packageList: [],
      showPassword: false,
      noticeText: "",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isShowFormlg: localStorage.getItem("showForm") == 1 ? true : false,
      ckFrom: 0,
      ttId: "", //营期ID
      tpId: "", //环节ID
      tlId: "", //课时ID
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      isiOS:
        navigator.userAgent.indexOf("IOSLogin") > -1 ||
        navigator.userAgent.indexOf("IOSNewLogin") > -1 ||
        navigator.userAgent.indexOf("IOSNewApp") > -1,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      showFormText: false, //是否跳转到表单
      typeIndex: 0, //默认定位到 简介
      tenObj: null,
      isSalesBegin: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      faStatus: 1,
      cfrom: global.ckFrom,
      relatesList: [], //关联资料列表
      isShowOther: false, //是否显示其他下载方式
      relatesIndex: 0,
      dataStatus: "HAS_MORE_DATA",
      timingPutOn: false,
      isOffSale: false, //是否上架
      belongLoading: false,
      belongPackageList: [],
      belongColumnList: [],
      pagePackage: 1,
      pageColumn: 2,
      is_page_package: false,
      is_page_column: false,
      showCombo: false,
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '',
      isCollect: false,
      bindPhoneSetting: null,
      themeId: '', //来源圈子任务的主题id
      searchText: "",
      inputFocus: false,
      fromCourseId: 0,
      fromColumnId: 0,
      relateCollocation: [],
      optimal: null, // 最低价格返回对象
      showPackageList: false, // 展示关联售卖列表弹窗
    };
  },
  computed: {
    showMarketingBar() {
      return this.datumInfo &&
          (
            (this.datumInfo.flashSales && !this.curHasPermission) ||
            (this.datumInfo.isFriendHelper && (this.faStatus == 1 || this.faStatus == 2)) ||
            (this.datumInfo.bargain && ((this.datumInfo.bargain.status == 1 && this.datumInfo.bargain.isPreheat == 1) || this.datumInfo.bargain.status == 2))
          )
    },
   // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.datumInfo.commonProdInfo && this.datumInfo.commonProdInfo.agentDiscount < 100
          ? this.datumInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.datumInfo.svipDiscount < 100)
            ? this.datumInfo.svipDiscount
            : (this.vipType == 2 && this.datumInfo.vipDiscount < 100)
              ? this.datumInfo.vipDiscount
              : 100
        let discountPrice = Number(this.datumInfo.price * idDiscount / 100).toFixed(2);
        btnTxt = discountPrice * 1 != this.datumInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        if (this.datumInfo.flashSales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    showSale() {
      let hasShow =
        this.datumInfo.isBuy != 1 &&
        this.datumInfo.permission != 21 &&
        Number(this.datumInfo.price) != 0 &&
        this.ckFrom != 78 &&
        ((this.companyAuth.enablePoints == 1 && this.datumInfo.point * 1 > 0) ||
          (this.datumInfo.permission != 19 &&
            this.datumInfo.vipDiscount * 1 != 100) ||
          (this.datumInfo.permission != 19 &&
            this.datumInfo.svipDiscount * 1 != 100));
      return hasShow;
    },
    curHasPermission() {
      let isPermission = !this.isOffSale && (this.datumInfo.isBuy ||
        this.datumInfo.permission == 19 ||
        (this.datumInfo.vipDiscount == 0 &&
          (this.datumInfo.vipType == 2)) ||
        (this.datumInfo.svipDiscount == 0 && this.datumInfo.vipType == 4) ||
        ((this.datumInfo.vipType == 3 || this.datumInfo.vipType > 4) &&
          this.datumInfo.commonProdInfo &&
          this.datumInfo.commonProdInfo.isAgent == 1 &&
          Number(this.datumInfo.commonProdInfo.agentDiscount) == 0));
      return isPermission;
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.datumInfo.isSaleOnly != 0 && !(this.datumInfo.isBuy == 1 || this.datumInfo.permission == 21) && Number(this.datumInfo.price) > 0 && !this.datumInfo.isFriendHelper && !this.datumInfo.bargain;
      return showdiscount;
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.datumInfo.commonProdInfo && this.datumInfo.commonProdInfo.agentDiscount < 100
        ? this.datumInfo.commonProdInfo.agentDiscount
        : (this.vipType == 4 && this.datumInfo.svipDiscount < 100)
          ? this.datumInfo.svipDiscount
          : (this.vipType == 2 && this.datumInfo.vipDiscount < 100)
            ? this.datumInfo.vipDiscount
            : 100;
      let calculationPrice = Number(this.datumInfo.price * idDiscount / 100).toFixed(2);
      if (this.optimal && this.datumInfo.isFriendHelper) {
        calculationPrice = Number(this.optimal.optimalPrice).toFixed(2);
      }
      return calculationPrice;
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.datumInfo &&
        (this.datumInfo.flashSales ||
          (this.datumInfo.bargain &&
            ((this.datumInfo.bargain.status == 1 &&
              this.datumInfo.bargain.isPreheat == 1) ||
              this.datumInfo.bargain.status == 2)) || this.datumInfo.isFriendHelper)
      return isMarketing
    },
    isUserGroup() { // true: 指定用户购买或者观看，但是该用户不属于指定用户  false：非指定用户购买或者观看，或者该用户属于指定用户
      let isUserGroup = ((this.datumInfo.isBuy == 0) || (this.datumInfo.isBuy && (this.datumInfo.permissionType == 1 || this.datumInfo.permissionType == 2 || this.datumInfo.permissionType == 3 || this.datumInfo.permissionType == 18 || this.datumInfo.permissionType == 19))) && (this.datumInfo.isUserGroup == 1 && this.datumInfo.isInUserGroup != 1);
      return isUserGroup;
    },
    tabList() {
      const list = [{
        title: '详情',
        index: 0,
        isShow: true
      }, {
        title: '试看',
        index: 1,
        isShow: this.datumInfo.isPreview
      }, {
        title: '目录',
        index: 2,
        isShow: true
      }]
      return list.filter(i => i.isShow)
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == '/homePage/datum/datumDetail' && from.path == '/homePage/datum/datumDetail') {
        this.initData();
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  methods: {
    clickGoAllPackage(data) {
      this.$refs.packageList.initModalData(data);
      this.$nextTick(() => {
        this.showPackageList = true;
      })
    },
    getProdRelateCollocation() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=8&prodId=${datumId}`,
        res => {
          this.relateCollocation = res.data ? res.data.slice(0, 3) : [];
        }
      );
    },
    focusInput() {
      setTimeout(() => {
        this.inputFocus = true;
      }, 200);
    },
    blurInput() {
      setTimeout(() => {
        this.inputFocus = false;
      }, 200);
    },
    doCollect() {
      this.isCollect = true;
    },
    cancelCollect() {
      this.isCollect = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.datumInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    handleClickBargainDetail(bargainId) {
      if (this.datumInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'warn'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        // 关联手机号码
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
          let pathQuery = {};
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          utilJs.goBindMobile(pathQuery);
        } else {
          if (
            this.datumInfo.collectPage == 1 &&
            this.datumInfo.isRelForm == true &&
            this.datumInfo.hasFormLog == false &&
            localStorage.getItem("showForm") == 1
          ) {
            this.goForm('', bargainId);
            return;
          }
          if (this.datumInfo.bargain.status == 2) {
            this.$routerGo(this, "push", {
              path: "/homePage/bargain/bargainDetail",
              query: {
                bargainId: bargainId
              }
            });
          }
        }
      })
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    closeCombo: function () {
      this.showCombo = false;
    },
    backPackage: function () {
      this.showCombo = true;
    },
    // getBelong() {
    //   if (!this.belongLoading) {
    //     this.belongLoading = true;
    //     let $this = this;
    //     let getUrl = `${global.apiurl}combos/showAll?`;
    //     utilJs.getMethod(getUrl + 'proType=5&proId=' + datumId + '&page=' + this.pagePackage + '&limit=10&tabType=1', function (res) {
    //       $this.belongLoading = false;
    //       $this.belongPackageList = $this.belongPackageList.concat(res.list.combos.data);
    //       $this.pagePackage = res.list.combos.data && res.list.combos.data.length >= 10 ? ($this.pagePackage + 1) : $this.pagePackage;
    //       $this.is_page_package = res.list.combos.data && res.list.combos.data.length >= 10 ? true : false;
    //     }, failRes => {
    //       $this.belongLoading = false;
    //     });
    //   }
    // },
    getBelong(tabType) {
      if (!this.belongLoading) {
        this.belongLoading = true;
        let $this = this;
        if (tabType == 1) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          utilJs.getMethod(getUrl + 'proType=5&proId=' + datumId + '&page=' + this.pagePackage + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongPackageList = $this.belongPackageList.concat(res.list.combos.data);
            if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
              $this.belongColumnList = res.list.columns.data;
              $this.is_page_column = res.list.columns.data && res.list.columns.data.length >= 10 ? true : false;
              $this.is_page_training = res.list.training.data && res.list.training.data.length >= 10 ? true : false;
            }
            $this.pagePackage = res.list.combos.data && res.list.combos.data.length >= 10 ? ($this.pagePackage + 1) : $this.pagePackage;
            $this.is_page_package = res.list.combos.data && res.list.combos.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        } else if (tabType == 2) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pageColumn + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongColumnList = $this.belongColumnList.concat(res.list.columns.data);
            $this.pageColumn = res.list.columns.data && res.list.columns.data.length >= 10 ? ($this.pageColumn + 1) : $this.pageColumn;
            $this.is_page_column = res.list.columns.data && res.list.columns.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        }
      }
    },
    getMore(tType) {
      this.getBelong(tType)
    },
    putOn() {
      this.datumInfo.status = 1;
      this.timingPutOn = false;
    },
    clickDesc(e) {
      if (e.target.tagName == "IMG" && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src], // 需要预览的图片http链接列表
        });
      }
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function() {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(
          global.apiurl +
            "redeemCodes/getCouponsByRedeemType?courseId=" +
            this.dId +
            "&redeemType=106&limit=10&page=" +
            this.couponPage,
          function(res) {
            $this.couponLoading = false;
            $this.couponList = $this.couponList.concat(res.data);
            $this.couponPage = res.next_page_url
              ? $this.couponPage + 1
              : $this.couponPage;
            $this.couponIsPage = res.next_page_url ? true : false;
          },
          (failRes) => {
            $this.couponLoading = false;
          }
        );
      }
    },
    // 记录播放进度
    setProgress() {
      return new Promise((resolve, reject) => {
        let data = {
          ttId: this.ttId, //营期ID
          tpId: this.tpId, //环节ID
          tlId: this.tlId, //课时ID
          ratio: 100, //完成进度0-100
          duration: 0,
        };
        utilJs.postMethod(global.apiurl + "k12/trainings/progress", data, () => {
          resolve()
        }, () => {
          reject()
        });
      })
    },
    setColumnProgress() {
      return new Promise((resolve, reject) => {
        let data = {
          prodType: global.ckFrom.column,
          prodId: this.fromColumnId,
          datumId: datumId
        };
        utilJs.postMethod(global.apiurl + "datum/saveDatumLearnLog", data, () => {
          resolve()
        }, () => {
          reject()
        });
      })
    },
    //切换到下载tab
    goDownloadTab() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (
        this.datumInfo.collectPage != 3 &&
        this.datumInfo.isRelForm == true &&
        this.datumInfo.hasFormLog == false &&
        localStorage.getItem("showForm") == 1
      ) {
        this.goForm();
        return;
      }
      this.typeIndex = 2;
    },
    //点击下载
    async clickDownload(item) {
      // 没有流量也不让观看
      if (await this.$refs.notSupportPlay.checkVideoFlowOver() == 1) {
        this.$refs.notSupportPlay.public_noStreamSupport('datum');
        return;
      }
      if (this.timingPutOn || this.isOffSale || this.isUserGroup) {
        let showText = this.isUserGroup
          ? (this.datumInfo.payType == 1 || this.datumInfo.payType == 3 ? '指定用户可下载' : '指定用户可购买')
          : (this.timingPutOn ? "该资料暂未开售！" : '该资料已下架')
        this.$showCjToast({
          text: showText,
          type: "text",
        });
        return;
      }
      if (!this.curHasPermission) {
        let msg =
          this.datumInfo.permission == 21
            ? "资料已加密，请解密后下载！"
            : (this.$isWxAppIos() ? '请咨询客服！' : "请先购买后再点击下载！");
        this.$showCjToast({
          text: msg,
          type: "warn",
        });
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (
        this.datumInfo.collectPage == 2 &&
        this.datumInfo.isRelForm == true &&
        this.datumInfo.hasFormLog == false &&
        localStorage.getItem("showForm") == 1
      ) {
        this.goForm();
        return;
      }
      if (isClicking) {
        return;
      }
      isClicking = true;
      // 下载次数加1
      utilJs.postMethod(
        global.apiurl + "datum/increaseDownload",
        { drId: item.id },
        async (res) => {
          isClicking = false;
          if (this.ckFrom == global.ckFrom.camp) {
            await this.setProgress();
          }
          if (this.fromColumnId) {
            await this.setColumnProgress();
          }
          let isIosMobile = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
          let hasHttp = !/^http/.test(item.qiniuObject);
          let dataUrl = item.qiniuObject;
          if (hasHttp) {
            //4 文档 6 其他 走七牛
            dataUrl = `${this.datumInfo.qiniuAccessUrl}/${item.qiniuObject}`;
          }
          let isQiNiu = dataUrl.includes('qnoss.ckjr001.com') || dataUrl.includes('qiniu.ckjr001.com');
          //七牛云音频ios手机不加attname属性
          //链接后如果有?则拼接&，否则拼接?
          let addParamSysbol = dataUrl.includes('?') ? '&' : '?';
          dataUrl = isQiNiu && isIosMobile && item.type == 2 ? dataUrl : `${dataUrl}${addParamSysbol}attname=${item.datumName}`;
          //type 1 视频 2 音频 3 电子书 4 文档 5 图片 6 其他

          if (utilJs.isIOSApp()) {
            let data1 = { dataUrl: dataUrl };
            window.webkit.messageHandlers.iosWechatDatumDownload.postMessage(
              JSON.stringify(data1)
            );
            return;
          }
          if (utilJs.isAndroidApp()) {
            let data1 = {
              call: "appDownLoad",
              data: {
                dataUrl: dataUrl,
              },
            };
            window.prompt(JSON.stringify(data1));
            return;
          }
          if (this.$isWxApp()) {
            dataUrl = encodeURIComponent(dataUrl)
            utilJs.miniProgramGoTo("push", `/pages/home/datum/index?dataUrl=${dataUrl}&datumSize=${item.datumSize}`)
            return
          }
          //IOS直接打开下载页
          if (isIosMobile) {
            window.location.href = dataUrl;
          } else {
            this.$routerGo(this, "push", {
              path: "/homePage/datum/datumDownload",
              query: {
                url: dataUrl,
                datumId: datumId,
              },
            });
          }
        },
        (failRes) => {
          isClicking = false;
        }
      );
    },
    goOtherDownload(index) {
      if (this.timingPutOn || this.isOffSale || this.isUserGroup) {
        let showText = this.isUserGroup
          ? (this.datumInfo.payType == 1 || this.datumInfo.payType == 3 ? '指定用户可下载' : '指定用户可购买')
          : (this.timingPutOn ? "该资料暂未开售！" : '该资料已下架')
        this.$showCjToast({
          text: showText,
          type: "text",
        });
        return;
      }
      this.relatesIndex = index;
      this.isShowOther = true;
      document.documentElement.style.overflow = "fixed";
    },
    closeMasker() {
      this.isShowOther = false;
      document.documentElement.style.overflow = "static";
    },
    //点击购买
    clickBuy() {
      if (this.timingPutOn || this.isOffSale) {
        this.$showCjToast({
          text: this.timingPutOn ? "该资料暂未开售！" : '该资料已下架',
          type: "text",
        });
        return;
      }
      if (isClicking) {
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        let pathQuery = {};
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        utilJs.goBindMobile(pathQuery);
      } else {
        if (
          this.datumInfo.collectPage == 1 &&
          this.datumInfo.collectPage != 3 &&
          this.datumInfo.isRelForm == true &&
          this.datumInfo.hasFormLog == false &&
          localStorage.getItem("showForm") == 1
        ) {
          this.goForm();
          return;
        }
        isClicking = true;
        let pathQuery = {
          extId: datumId,
          ckFrom: global.ckFrom.datum,
          isFromInvite: 0,
          cId: -1,
          format: this.datumInfo.format,
        };
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (
          this.datumInfo.flashSales &&
          this.datumInfo.flashSales.sales.status == 2 &&
          this.optimal && this.optimal.optimalPriceType == 101
        ) {
          pathQuery.pId = this.datumInfo.flashSales.pId;
        } else if (this.optimal && this.optimal.optimalPriceType != 101) {
          pathQuery.ckFrom = 8;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/course/coursePay",
          query: pathQuery,
        });
      }
    },
    //跳转到表单
    goForm: function(isShowPresent, bargainId) {
      // 关联表单id是cId
      let isGoBack =
        this.datumInfo.isBuy ||
        this.datumInfo.permission == 19 ||
        this.datumInfo.permission == 21 ||
        (this.datumInfo.vipDiscount == 0 && this.datumInfo.vipType > 1) ||
        (this.datumInfo.svipDiscount == 0 && this.datumInfo.vipType > 2)
          ? 1
          : 0;
      let pathQuery = {
        cId: -1,
        extId: datumId,
        ckFrom: global.ckFrom.datum,
        isFromInvite: 0,
        pId: -1,
        relType: 13,
        type: 1,
        isGoBack: isGoBack,
        format: this.datumInfo.format,
        bargainId: bargainId
      };
      if (this.datumInfo.flashSales && this.datumInfo.flashSales.sales.status == 2) {
        pathQuery.pId = this.datumInfo.flashSales.pId;
      }
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      this.$routerGo(this, "push", { path: "/homePage/form", query: pathQuery }); //type==1表示关联表单
    },
    changePsw() {
      this.noticeText = "";
    },
    clickEncrypt() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind && utilJs.goBindMobile()) {
        return;
      }
      if (
        this.datumInfo.collectPage != 3 &&
        this.datumInfo.isRelForm == true &&
        this.datumInfo.hasFormLog == false &&
        localStorage.getItem("showForm") == 1
      ) {
        this.goForm();
        return;
      }
      this.noticeText = "";
      this.showPassword = true;
    },
    //输入密码确认
    submitPassword(inputPwd) {
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (isClicking) {
        return;
      }
      isClicking = true;
      let $this = this;
      utilJs.postMethod(
        global.apiurl + "common/verifyEncrypt",
        { encrypt: inputPwd, id: datumId, prodType: global.ckFrom.datum },
        (res) => {
          isClicking = false;
          if (res.code == 500) {
            $this.noticeText = "*密码错误";
          } else if (res.code == 200) {
            $this.showPassword = false;
            $this.datumInfo.isBuy = 1;
            this.initData();
          }
        },
        (failRes) => {
          isClicking = false;
        }
      );
    },
    getDatumInfo() {
      let $this = this;
      let postUrl = global.apiurl + "datum/detail/" + datumId + "?isSkeleton=1";
      if (this.themeId) {
        postUrl = postUrl + `&themeId=${this.themeId}`
      }
      if (this.fromCourseId) {
        postUrl = postUrl + `&courseId=${this.fromCourseId}`
      }
      utilJs.getMethod(postUrl,
        (res) => {
          setDocumentTitle(res.name.length > 13 ? (res.name.substring(0, 13) + '...') : res.name); // eslint-disable-line
          //if (((res.isBuy == 0) || (res.isBuy == 1 && (res.payType != 2 || (res.vipType > 1 && ((Number(res.vipDiscount) == 0 && (res.permission == 17 || res.permission == 19)) || (Number(res.svipDiscount) == 0 && res.permission == 19)))))) && res.status == 2) {
          if (res.status == 2 && (res.permission != 18 || (res.permission == 18 && res.isBuy == 0))) {
            $this.isOffSale = true;
            $this.$store.commit("updateHasNoticeText", true);
          }
          if (res.status == 3 && ((res.isBuy == 0) || (res.isBuy && (res.payType == 1 || res.payType == 3)))) {
            $this.timingPutOn = true;
          }
          $this.getBelong(1)
          res.svipDiscount = res.svipDiscount * 1;
          res.vipDiscount = res.vipDiscount * 1;
          res.deductiblePoints = res.point; // 兼容字段
          $this.datumInfo = res;
          // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
          $this.optimal = res.optimal || null;
          $this.isCollect = $this.datumInfo.isCollect ? $this.datumInfo.isCollect : false;
          $this.showFormText =
            res.collectPage != 3 &&
            (res.isBuy ||
              res.permission == 19 ||
              (res.vipDiscount == 0 && res.vipType > 1) ||
              (res.svipDiscount == 0 && res.vipType > 2)) &&
            res.isRelForm == true &&
            res.hasFormLog == false &&
            localStorage.getItem("showForm") == 1
              ? true
              : false;
          if (!this.curHasPermission) {
            this.getProdRelateCollocation();
          }
          this.$refs.descriptions.getDescptionDetail();
          this.wechatShare();
          this.getDatumsRelates();
        }
      );
    },
    getDatumsRelates() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(
        `${global.apiurl}datum/datumsRelates/${datumId}?limit=${LIMIT}&page=${pageIndex}&name=${this.searchText}`,
        (res) => {
          if (res.data.length == 0 && this.datumInfo.status == 1 && pageIndex == 1 && !firstSearch) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: { info: "亲爱的学员您好，老师正在整理课程，请耐心等待" },
            });
          }
          if (pageIndex == 1) {
            this.relatesList = res.data;
          } else {
            this.relatesList = [...this.relatesList, ...res.data];
          }
          if (res.data && res.data.length < LIMIT) {
            this.dataStatus =
              pageIndex == 1 && res.data.length == 0
                ? "NO_DATA"
                : "NO_MORE_DATA";
          } else {
            this.dataStatus = "HAS_MORE_DATA";
            pageIndex++;
          }
          firstSearch = true;
        },
        (failRes) => {
          this.dataStatus = "DATA_ERROR";
        }
      );
    },
    changeType(typeIndex) {
      this.typeIndex = typeIndex;
      // 切换tab的时候重新初始化组件，因为之前v-show 会导致组件渲染出现一样的视频id
      this.$nextTick(() => {
        if (typeIndex == 0) {
          this.$refs.descriptions.getDescptionDetail();
        } else if (typeIndex == 1 && this.datumInfo.isPreview) {
          this.$refs.previewDescriptions.imgTextPreview();
        }
      })
    },
    getRelatePackage() {
      let $this = this;
      utilJs.getMethod(
        global.apiurl + "combos/showRel?proId=" + datumId + "&proType=5",
        function(res) {
          $this.packageList = res;
        }
      );
    },
    falshSalesTime(status) {
      if (this.datumInfo.flashSales) {
        this.datumInfo.flashSales.sales.status = status;
      } else if (this.datumInfo.bargain) {
        this.datumInfo.bargain.status = status;
      } else {
        this.faStatus = status;
      }
    },
    finishFlashSales(status) {
      if (this.datumInfo.flashSales) {
        this.datumInfo.flashSales.sales.status = status;
      } else if (this.datumInfo.bargain) {
        this.getDatumInfo();
      } else {
        this.faStatus = status;
      }
      if (status == -1) {
        this.datumInfo.flashSales = null;
      }
    },
    //活动海报
    invitePoster: function() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind && utilJs.goBindMobile()) {
        return;
      }
      let ckFrom = global.ckFrom.datum;
      let type = this.datumInfo.flashSales ? 2 : this.datumInfo.bargain ? 5 : 4;
      let cId = this.datumInfo.flashSales
        ? this.datumInfo.flashSales.pId
        : this.datumInfo.bargain ? this.datumInfo.bargain.bargainId : this.datumInfo.faId;
      let proId = this.$route.query.datumId;
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadPoster",
        query: { type: type, ckFrom: ckFrom, cId: cId, proId: proId },
      });
    },
    //助力详情
    goHelpDetail: function() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.timingPutOn || this.isOffSale) {
        this.$showCjToast({
          text: this.timingPutOn ? "该资料暂未开售！" : '该资料已下架',
          type: "text",
        });
        return;
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: "活动未开始，暂不能助力领取！",
          type: "warn",
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: {
            faId: this.datumInfo.faId,
            refereeId: localStorage.getItem("userId"),
          },
        });
      }
    },
    wechatShare: function () {
      let title = this.datumInfo.shareSetting && this.datumInfo.shareSetting.shareTitle ? this.datumInfo.shareSetting.shareTitle : (this.datumInfo.shareTitle || this.datumInfo.name);
      if (
        this.companyAuth.enableFriendHelper == 1 &&
        this.datumInfo.isFriendHelper
      ) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      if (this.datumInfo.bargain != null && ((this.datumInfo.bargain.status == 1 && this.datumInfo.bargain.isPreheat == 1) || this.datumInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      let shareImg = this.datumInfo.shareSetting && this.datumInfo.shareSetting.sharePic ? this.datumInfo.shareSetting.sharePic : (!!this.datumInfo.datumCover ? this.datumInfo.datumCover : require("@/assets/i/wap/datum/datumsDefault.png"));
      let shareUrl = `${window.location.href.split("#")[0]}#${
        this.$route.path
      }?datumId=${datumId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.datumInfo.shareSetting && this.datumInfo.shareSetting.shareDesc ? this.datumInfo.shareSetting.shareDesc : (this.datumInfo.shareDesc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function() {
      let title = this.datumInfo.shareSetting && this.datumInfo.shareSetting.shareTitle ? this.datumInfo.shareSetting.shareTitle : (this.datumInfo.shareTitle || this.datumInfo.name);
      if (
        this.companyAuth.enableFriendHelper == 1 &&
        this.datumInfo.isFriendHelper
      ) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      if (this.datumInfo.bargain != null && ((this.datumInfo.bargain.status == 1 && this.datumInfo.bargain.isPreheat == 1) || this.datumInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      let shareImg = this.datumInfo.shareSetting && this.datumInfo.shareSetting.sharePic ? this.datumInfo.shareSetting.sharePic : (!!this.datumInfo.datumCover ? this.datumInfo.datumCover : require("@/assets/i/wap/datum/datumsDefault.png"));
      let shareUrl = `${window.location.href.split("#")[0]}#${
        this.$route.path
      }?datumId=${datumId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.datumInfo.shareSetting && this.datumInfo.shareSetting.shareDesc ? this.datumInfo.shareSetting.shareDesc : (this.datumInfo.shareDesc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (
          this.dataStatus == "HAS_MORE_DATA" &&
          this.relatesList.length > 0 &&
          this.typeIndex == 2
        ) {
          this.getDatumsRelates();
        }
      });
    },
    startSearch(e) {
      // this.courseType = 3;
      pageIndex = 1;
      this.relatesList = [];
      // utilJs.toPageScrollTop();
      this.searchText = e.searchValue;
      this.getDatumsRelates();
    },
    initData() {
      isClicking = false;
      this.datumInfo = {
        datumSize: "0",
        name: "",
        format: "zip",
        permission: 18,
        price: "0.00",
        downloadTimes: 0,
        qiniuObject: "",
        isBuy: false,
      };
      pageIndex = 1;
      datumId = this.$route.query.datumId;
      firstSearch = false;
      this.fromCourseId = this.$route.query.fromCourseId || 0;
      this.goodsRoomId = this.$route.query.goodsRoomId || "";
      this.tpId = this.$route.query.tpId || ""; //环节id
      this.ckFrom = this.$route.query.ckFrom || "";
      this.ttId = this.$route.query.ttId || "";
      this.tlId = this.$route.query.tlId || "";
      this.themeId = this.$route.query.themeId || '';
      this.fromColumnId = this.$route.query.fromColumnId || "";
      this.dId = datumId;
      this.packageList = [];
      this.couponPage = 1;
      this.faStatus = 1;
      this.relatesIndex = 0;
      this.couponIsPage = false;
      this.couponLoading = false;
      this.showCoupon = false;
      this.isShowOther = false;
      this.couponList = [];
      this.relatesList = [];
      this.showFormText = false;
      this.dataStatus = "HAS_MORE_DATA";
      this.typeIndex = 0;
      this.tenObj = null;
      this.timingPutOn = false;
      this.isOffSale = false;
      this.belongLoading = false;
      this.belongPackageList = [];
      this.belongColumnList = [];
      this.pagePackage = 1;
      this.pageColumn = 2;
      this.is_page_package = false;
      this.is_page_column = false;
      this.showCombo = false;
      this.searchText = '';
      this.inputFocus = false;
      this.relateCollocation = [];
      this.optimal = null;
      this.showPackageList = false;
      getBindPhoneSetting(global.ckFrom.datum).then(res => {
        this.bindPhoneSetting = res;
      });
      this.getDatumInfo();
      this.getRelatePackage();
      this.getCouponList();
      window.addEventListener("scroll", this.windowScrollFunction);
    }
  },
  activated() {
    setDocumentTitle("资料库详情"); // eslint-disable-line
    this.initData();
  },
  deactivated() {
    this.dataStatus = "NO_MORE_DATA";
    window.removeEventListener("scroll", this.windowScrollFunction);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-gradient {
  background-image: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/datum/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-wb-ba {
  word-break: break-all;
}
.ml120 {
  margin-left: 3rem;
}
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.backdropFilter {
  backdrop-filter: blur(10px);
}
.hh430 {
  height: 10.75rem;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.backdropFilter2 {
  backdrop-filter: blur(6px);
}
</style>